<template>
  <div class="zero-container-full">
    <el-container style="height: 100%">
      <el-aside v-if="$slots.aside"
                class="zero-container-full__aside">
        <slot name="aside"/>
      </el-aside>
      <el-container>

        <el-header v-if="$slots.header"
                   class="zero-container-full__header">
          <slot name="header"/>
        </el-header>

        <el-container>
          <el-header v-if="$slots.tool"
                     class="zero-container-full__tool">
            <slot name="tool"/>
          </el-header>
          <el-main v-if="$slots.main"
                   class="zero-container-full__main">
            <slot name="main"/>
          </el-main>
          <el-footer v-if="$slots.footer"
                     class="zero-container-full__footer">
            <slot name="footer"/>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>


<script>
export default {
  name: 'zero-container'
}
</script>
<style>

.zero-container-full {
  background-color: white;
  padding-top: 15px;
  height: calc(100vh - 86px); /* 充满整个视口高度 */
}

.zero-container-full__aside {
  padding: 0 !important;
  margin-bottom: 5px !important;
  width: 15% !important;
  overflow: auto; /* 添加滚动条 */
}

.zero-container-full aside {
  background: rgba(255, 255, 255, 0.5) !important;
}

.zero-container-full__header,
.zero-container-full__tool {
  height: auto !important;
  padding: 0 10px !important;
}


.zero-container-full__main {
  overflow: auto; /* 添加滚动条 */
  height: 50px; /* 指定一个固定高度，根据需要调整 */
  padding: 10px !important;
}

.zero-container-full__footer {
  padding: 0 10px;
  height: auto !important;
  overflow-x: auto; /* 添加滚动条 */
  overflow-y: hidden; /* 添加滚动条 */
}

/** 左边树样式*/
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 10px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/** 左边树样式*/
.node-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 一般认为768px以下为移动设备，可根据实际情况调整 */
@media (max-width: 767px) {
  .zero-container-full {
    overflow: auto; /* 充满整个视口高度 */
  }

  .zero-container-full .el-aside {
    min-width: 100% !important;
  }

  .zero-container-full .el-container {
    /* 改变整体布局方向为列布局 */
    flex-direction: column;
  }

  .zero-container-full .el-aside,
  .zero-container-full .el-main {
    /* 移除原有的宽度设置，让它们根据内容自适应 */
    width: auto;
  }

  .zero-container-full .el-header,
  .zero-container-full .el-footer {
    /* 确保头部和底部在小屏幕下也有合适的处理，例如全宽显示 */
    width: 100%;
  }
}


</style>
